<template>
  <el-collapse v-model="activeNames" style="padding: 0 10px">
    <el-collapse-item name="1">
      <template slot="title">
        基本配置<i class="el-icon-info" />
      </template>
      <el-form :model="formData" label-width="100px" :size="formSize">
        <el-form-item label="节点id：" prop="id">
          <el-input v-model="formData.id" />
        </el-form-item>
        <el-form-item label="节点名称：" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="节点描述：" prop="documentation">
          <el-input v-model="formData.documentation" />
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item name="2">
      <template slot="title">
        人员配置<i class="el-icon-user-solid" />
      </template>
      <el-input v-model="assigneeValue" :size="formSize" readonly>
        <el-button slot="append" icon="el-icon-plus" @click="btnAddAssignee" />
      </el-input>
    </el-collapse-item>
    <el-collapse-item name="3">
      <template slot="title">
        表单配置<i class="el-icon-s-order" />
      </template>
      <el-table :data="formData.formProperty" :size="formSize" fit>
        <el-table-column label="字段" prop="name" />
        <el-table-column label="属性" prop="id" />
        <el-table-column label="可读" prop="readable">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.readable" @change="changeFormProperty(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="可写" prop="writable">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.writable" @change="changeFormProperty(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
    <el-collapse-item name="4">
      <template slot="title">
        按钮配置<i class="el-icon-s-help" />
      </template>
      <el-table
        ref="buttonTable"
        :data="btnOptions"
        :size="formSize"
        @selection-change="selectionChange"
      >
        <el-table-column prop="label" label="字段" />
        <el-table-column prop="value" label="属性" />
        <el-table-column label="是否显示" type="selection" width="55" />
      </el-table>
    </el-collapse-item>
    <el-collapse-item name="5">
      <template slot="title">
        任务监听<i class="el-icon-message-solid" />
      </template>
      <el-button type="success" :size="formSize" @click="btnAddListener('TaskListenerDialog')">添加</el-button>
      <el-table :data="formData.taskListener" :size="formSize" fit>
        <el-table-column prop="event" label="事件" />
        <el-table-column prop="type" label="类型" :formatter="getType" />
        <el-table-column prop="value" label="值" min-width="120px" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="btnEditListener('TaskListenerDialog', scope.row)"><span class="bpmn-link">编辑</span></el-link>
            <el-link type="danger" @click="btnDeleteListener(scope.$index, 'taskListener', 'flowable:TaskListener')"><span class="bpmn-link">删除</span></el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
    <el-collapse-item name="6">
      <template slot="title">
        执行监听<i class="el-icon-message-solid" />
      </template>
      <el-button type="success" :size="formSize" @click="btnAddListener('ExecutionListenerDialog')">添加</el-button>
      <el-table :data="formData.executionListener" :size="formSize" fit>
        <el-table-column prop="event" label="事件" />
        <el-table-column prop="type" label="类型" :formatter="getType" />
        <el-table-column prop="value" label="值" min-width="120px" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="btnEditListener('ExecutionListenerDialog', scope.row)"><span class="bpmn-link">编辑</span></el-link>
            <el-link type="danger" @click="btnDeleteListener(scope.$index, 'executionListener', 'flowable:ExecutionListener')"><span class="bpmn-link">删除</span></el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
    <el-collapse-item name="7">
      <template slot="title">
        服务配置<i class="el-icon-s-order" />
      </template>
      <el-checkbox v-model="formData.async">异步</el-checkbox>
      <el-checkbox v-model="formData.exclusive">独占任务</el-checkbox>
    </el-collapse-item>

    <task-listener ref="TaskListenerDialog" :form-size="formSize" @saveListener="saveListener" />
    <execution-listener ref="ExecutionListenerDialog" :form-size="formSize" @saveListener="saveListener" />
    <assignee ref="AssigneeDialog" :form-size="formSize" :form-data="formData" />
  </el-collapse>
</template>

<script>
import TaskListener from './property/taskListener'
import ExecutionListener from './property/executionListener'
import Assignee from './property/assignee'
import mixinPanel from '../../utils/mixinPanel'
import { mapState } from 'vuex'

export default {
  name: 'Task',
  components: { TaskListener, ExecutionListener, Assignee },
  mixins: [mixinPanel],
  props: {
    btnOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: {
        taskListener: [],
        async: false,
        exclusive: false,
        assignee: null,
        candidateUsers: null,
        candidateGroups: null
      },
      assigneeList: []
    }
  },
  computed: {
    ...mapState('bpmn', ['formKey']),
    assigneeValue() {
      const all = []
      if (this.formData.assignee) {
        all.push('分配人：' + this.formData.assignee)
      }
      if (this.formData.candidateUsers) {
        all.push('候选用户：' + this.formData.candidateUsers)
      }
      if (this.formData.candidateGroups) {
        all.push('候选组：' + this.formData.candidateGroups)
      }
      return all.join(' || ')
    },
    extensionElements() {
      return this.element.businessObject.extensionElements
        ? this.element.businessObject.extensionElements.values : []
    }
  },
  watch: {
    'formData.assignee': function(val) {
      this.updateProperties({ assignee: val || null })
    },
    'formData.candidateUsers': function(val) {
      this.updateProperties({ candidateUsers: val || null })
    },
    'formData.candidateGroups': function(val) {
      this.updateProperties({ candidateGroups: val || null })
    },
    'formData.async': function(val) {
      this.updateProperties({ async: val || null })
    },
    'formData.exclusive': function(val) {
      this.updateProperties({ exclusive: val || null })
    },
    'formKey': function() {
      this.getFormProperty()
    }
  },
  mounted() {
    this.formData.taskListener = this.getListenerValue('flowable:TaskListener')
    this.getButtonValue()
    this.getFormProperty()
  },
  methods: {
    getButtonValue() {
      const el = this.extensionElements.filter(item => item.$type === 'flowable:Button')
      this.btnOptions.forEach((item, index) => {
        const o = el.find(fd => fd.value === item.value)
        if (o) {
          this.$refs.buttonTable.toggleRowSelection(this.btnOptions[index])
        }
      })
    },
    getFormProperty() {
      // 修改/绑定表单
      this.formData.formProperty = []
      if (this.formKey) {
        const f = this.formProperty.find(item => item.id === this.formKey)
        this.formData.formProperty = f.property
        const el = this.extensionElements.filter(item => item.$type === 'flowable:FormProperty')
        const o = el.map(({ id, name, readable, writable }) => {
          return { id, name, readable, writable }
        })
        this.formData.formProperty.forEach(item => {
          const fd = o.find(f => f.id === item.id && f.name === item.name)
          if (fd) {
            item.readable = (fd.readable === 'true' || fd.readable === true)
            item.writable = (fd.writable === 'true' || fd.writable === true)
          }
        })
        this.updateExtensionElements('flowable:FormProperty', this.formData.formProperty || [])
      }
    },
    selectionChange(rows) {
      this.updateExtensionElements('flowable:Button', rows)
    },
    btnAddAssignee() {
      this.$refs.AssigneeDialog.showDialog()
    },
    changeFormProperty(row) {
      const params = []
      this.formData.formProperty.forEach(item => {
        const o = Object.assign({}, item)
        if (item.id === row.id && item.name === row.name) {
          o.readable = row.readable
          o.writable = row.writable
        }
        params.push(o)
      })
      this.updateExtensionElements('flowable:FormProperty', params || [])
    }
  }
}
</script>
